.article-list{
  .banner-item{
    position:relative;
    &:hover{
      .banner-img{
        transform: scale(1.1);
      }      
    }
  }
  .list-cover{
    position: relative;
    color: #fff;
    overflow: hidden;  
    &:hover{
      .list-cover-img{
        transform: scale(1);
        filter:blur(0);
      }
    }
    .list-cover-img{
      width:100%;
      height:100%;
      transform: scale(1.1);
      transition: transform .1s;
      filter:blur(2px);
    }
    .list-cover-icon{
      position: absolute;
      left:0;
      width:100%;
      text-align:center; 
    }
    .list-cover-desc{   
      position: absolute;
      left:0; 
      width:100%;
      text-align:center;
    }
  }
  .title{
    position:absolute;
    width:100%;
    left:0;
    text-align:center;   
    color:#fff;
  }
  .desc{
    position:absolute;
    width:100%;
    left:0;
    text-align:center;  
    color:#fff;
  }
  .banner-img{
    width:100%;
    object-fit: cover;
    transition: transform .25s;     
  }
  .page,.wap-page{
    display:none;
    text-align:center;
  }
}
@media screen and (min-width: 1049px) {
  .banner-list{
    margin-bottom:15px;
  }
  .list-cover{
    height:196px;
    margin-bottom:15px;
    border-radius: 6px;
    .list-cover-img{
      border-radius: 6px;
    }
    .list-cover-icon{
      padding:0 15px;
      top:35px;
      >img{
        height:70px;
      }
    }
    .list-cover-desc{
      padding:0 15px;
      bottom:30px;
    }
  }
  .title{
    top:85px;
    font-size:25px;    
    letter-spacing:2px;  
  }
  .desc{
    bottom:60px;
    font-size:15px;
    letter-spacing:1px; 
  }
  .banner-img{
    height:210px;
    border-radius:6px;
  }
  .page{
    display:block !important;
    margin:40px 0 40px;
  }
}
@media screen and (max-width: 1050px) {
  .banner-list{
    margin-bottom:0.3rem;
  }
  .list-cover{
    height:3.84rem;
    margin-bottom:0.3rem;
    border-radius: 0.12rem;
    .list-cover-img{
      border-radius: 0.12rem;
    }
    .list-cover-icon{
      padding:0 0.3rem;
      top:0.7rem;
      >img{
        height:1.4rem;
      }
    }
    .list-cover-desc{
      padding:0 0.3rem;
      bottom:0.6rem;
    }
  }
  .title{
    top:1.7rem;
    font-size:0.5rem;   
    letter-spacing:0.04rem;  
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .desc{
    bottom:1.2rem;
    font-size:0.3rem;
    letter-spacing:0.02rem; 
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .banner-img{
    height:4.2rem;
    border-radius:0.12rem;
  }
  .wap-page{
    display:flex !important;
    justify-content:center;
    margin:0.8rem 0 0.8rem;
  }
}